<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
	    <meta name="description" content="能源管理云端">
	    <meta name="keyword" content="能源">
	    <title>master</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
	</body>
	<script src="js/echarts.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="js/china.js"></script>
	<script type="text/javascript">
	    // 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById('main'));
	    var data = [
	        { name: '海门', value: 9 },
	        { name: '鄂尔多斯', value: 12 }
	    ];
	
	    var geoCoordMap = {
	        '海门': [121.15, 31.89],
	        '鄂尔多斯': [109.781327, 39.608266]
	    };
	
	    var convertData = function (data) {
	        var res = [];
	        for (var i = 0; i < data.length; i++) {
	            var geoCoord = geoCoordMap[data[i].name];
	            if (geoCoord) {
	                res.push({
	                    name: data[i].name,
	                    value: geoCoord.concat(data[i].value)
	                });
	            }
	        }
	        return res;
	    };
	    var coldCar = [
	        {
	            "name": "车辆1",
	            "value": [107.615944, 27.479744, 2]
	        },
	        {
	            "name": "车辆2",
	            "value": [108.296644, 27.676476, 2]
	        }
	    ];
	    var  option = {
	        geo: {
	            map: 'china',
	            roam: true,
	            mapStyle: {
	                styleJson: [
	                    {
	                        "featureType": "water",
	                        "elementType": "all",
	                        "stylers": {
	                            "color": "#00FF00"
	                        }
	                    },
	                    {
	                        "featureType": "land",
	                        "elementType": "all",
	                        "stylers": {
	                            "color": "#00FF00"
	                        }
	                    },
	                    {
	                        "featureType": "boundary",
	                        "elementType": "geometry",
	                        "stylers": {
	                            "color": "#064f85"
	                        }
	                    },
	                    {
	                        "featureType": "railway",
	                        "elementType": "all",
	                        "stylers": {
	                            "visibility": "off"
	                        }
	                    },
	                    {
	                        "featureType": "highway",
	                        "elementType": "geometry",
	                        "stylers": {
	                            "color": "#004981"
	                        }
	                    },
	                    {
	                        "featureType": "highway",
	                        "elementType": "geometry.fill",
	                        "stylers": {
	                            "color": "#005b96",
	                            "lightness": 1
	                        }
	                    },
	                    {
	                        "featureType": "highway",
	                        "elementType": "labels",
	                        "stylers": {
	                            "visibility": "off"
	                        }
	                    },
	                    {
	                        "featureType": "arterial",
	                        "elementType": "geometry",
	                        "stylers": {
	                            "color": "#004981"
	                        }
	                    },
	                    {
	                        "featureType": "arterial",
	                        "elementType": "geometry.fill",
	                        "stylers": {
	                            "color": "#00508b"
	                        }
	                    },
	                    {
	                        "featureType": "poi",
	                        "elementType": "all",
	                        "stylers": {
	                            "visibility": "off"
	                        }
	                    },
	                    {
	                        "featureType": "green",
	                        "elementType": "all",
	                        "stylers": {
	                            "color": "#056197",
	                            "visibility": "off"
	                        }
	                    },
	                    {
	                        "featureType": "subway",
	                        "elementType": "all",
	                        "stylers": {
	                            "visibility": "off"
	                        }
	                    },
	                    {
	                        "featureType": "manmade",
	                        "elementType": "all",
	                        "stylers": {
	                            "visibility": "off"
	                        }
	                    },
	                    {
	                        "featureType": "local",
	                        "elementType": "all",
	                        "stylers": {
	                            "visibility": "off"
	                        }
	                    },
	                    {
	                        "featureType": "arterial",
	                        "elementType": "labels",
	                        "stylers": {
	                            "visibility": "off"
	                        }
	                    },
	                    {
	                        "featureType": "boundary",
	                        "elementType": "geometry.fill",
	                        "stylers": {
	                            "color": "#029fd4"
	                        }
	                    },
	                    {
	                        "featureType": "building",
	                        "elementType": "all",
	                        "stylers": {
	                            "color": "#1a5787"
	                        }
	                    },
	                    {
	                        "featureType": "label",
	                        "elementType": "all",
	                        "stylers": {
	                            "visibility": "off"
	                        }
	                    }
	                ]
	            },
	            itemStyle: {					// 定义样式
	                normal: {					// 普通状态下的样式
	                    areaColor: '#004981',
	                    borderColor: '#111'
	                },
	                emphasis: {					// 高亮状态下的样式
	                    areaColor: '#004981'
	                }
	            }
	        },
	        backgroundColor: '#FFFFFF',  		// 图表背景色
	        title: {
	        },
	        series: [
	            {
	                name: "冷链运输车分布",
	                type: 'custom',//配置显示方式为用户自定义
	                coordinateSystem: 'geo',
	                itemStyle: {
	                    normal: {
	                        color: '#46bee9'
	                    }
	                },
	                renderItem: function (params, api) {//具体实现自定义图标的方法
	                    return {
	                        type: 'image',
	                        style: {
	                            image: "img/github.png",
	                            x: api.coord([
	                                coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
	                                    .value[1]
	                            ])[0],
	                            y: api.coord([
	                                coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
	                                    .value[1]
	                            ])[1]
	                        }
	                    }
	                },
	                data: coldCar
	            }
	        ]
	    };
	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	</script>
</html>